<script setup lang="ts">
import { insert, update } from '@/api/desktop/MenuApi'
import { list } from '@/api/desktop/DictApi'
import { inject, ref } from 'vue'
import { MenuType } from '@/views/desktop/type/index.ts'

let dialogVisible = inject('dialogVisible')
let menu = inject('menu', ref<MenuType>(new MenuType()))
let emit = defineEmits(['initDesk'])
const saveMenu = () => {
  if (menu.value.id) {
    update(menu.value).then(() => {
      cancel()
    })
  } else {
    insert(menu.value).then(() => {
      cancel()
    })
  }
}

let dict = {}
list().then((res) => {
  for (let item of res) {
    // 把item的id作为dict的key
    dict[item.id] = item
  }
})
const cancel = () => {
  dialogVisible.value['1'] = false
  emit('initDesk')
}
</script>

<template>
  <el-dialog
    v-model="dialogVisible['1']"
    title="添加"
    width="30%"
    :before-close="cancel"
  >
    <div>
      <el-form
        label-position="right"
        label-width="100px"
        :model="menu"
        style="max-width: 460px"
      >
        <el-form-item label="菜单名称">
          <el-input v-model="menu.name" />
        </el-form-item>
        <el-form-item label="菜单图标">
          <el-input v-model="menu.iconUrl" />
        </el-form-item>
        <el-form-item label="图标类型" class="">
          <el-select
            v-model="menu.iconType"
            style="width: 100%"
            placeholder="选择图标类型"
            size="default"
          >
            <el-option
              v-for="item in dict['1721446351139831809'].children"
              :key="item.id"
              :label="item.name"
              :value="item.type"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="菜单链接">
          <el-input v-model="menu.linkUrl" />
        </el-form-item>
        <el-form-item label="打开方式">
          <el-select
            v-model="menu.openModel"
            style="width: 100%"
            placeholder="选择打开方式"
            size="default"
          >
            <el-option
              v-for="item in dict['1719290031011840001'].children"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="saveMenu">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped></style>
